<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./color.css" />
  <script src="./colors.js"></script>
  <script src="./copy.js"></script>
  <style></style>
</head>

<body>
  <div id="content"></div>
  <script>
    /*
    全局有COLORS_STRING变量，里面的结构是每行一个颜色的字符串，格式：
    颜色名|十六进制颜色|rgb颜色

    要求：
    将每一行颜色转换为如下结构的字符串，
    将所有颜色转化完的html渲染在div#id=content里

    <ul class='block' style='background-color:maroon;'>
      <li>maroon</li>
      <li>#800000</li>
      <li>128,0,0</li>
    </ul>

    */

    function allColors(text) {
      return text.split('\n').map(function (arr) {
        return arr.split('|')
      }).map(function (v) {
        return ` <ul class='block' style='background-color:${v[0]};'>
      <li>${v[0]}</li>
      <li>${v[1]}</li>
      <li>${v[2]}</li>
    </ul>`
      }).join("")
      console.log(text) // 打开控制台，注意观察text格式
      // 你的代码
    }

    // -------------------------- 以下内容保持不动 --------------------------
    document.querySelector('#content').innerHTML = allColors(COLORS_STRING)
    document.body.onclick = function (event) {
      if (event.target.tagName === 'LI') {
        copy(event.target.innerText)
        alert('复制：' + event.target.innerText)
      }
    }
  </script>
</body>

</html>